import React from 'react';
import Swipeable from 'react-swipeable-views';

import './SwipeableViews.css';

class SwipeableViews extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      swipeToErrorPageFuncs: [],
    };
  }

  render() {
    const {index, onChengeIndex, onPageValidate, children} = this.props;

    const handleChangeIndex = (idx, indexLatest)=>{
      // ここでページを遷移させないと、stateが変わらず、強制的にエラーページに遷移することができない。
      onChengeIndex(idx);

      // ページを戻している時は、チェックしない。
      let direction = idx - indexLatest;
      if ( direction < 0 )
        return;

      // 入力チェック関数が設定されていない場合は、チェックしない。
      if (!onPageValidate)
        return;

      if (onPageValidate(indexLatest)) {
        this._clearCallbackStack();
      } else {
        this._pushCallbackStack(()=>{
          onChengeIndex(indexLatest);
        });
      }
    }

    const handleTransitionEnd = ()=>{
      // handleChangeIndexから、props.onChangeIndex()を実行しても、強制的に指定ページに遷移することはできない。
      // 当functionだと、強制的に指定ページに遷移することができる。
      // そのため、handleChangeIndexで、チェックしてNG分をスタックしておき
      // 当functionで強制的に、遷移させる。
      if (this.state.swipeToErrorPageFuncs.length > 0) {
        let swipeToErrorPage = this.state.swipeToErrorPageFuncs[0];
        this._clearCallbackStack();
        swipeToErrorPage();
      }
    }

    return (
      <div className="SwipeableViews">
        <Swipeable
          index={index}
          ignoreNativeScroll={true}
          onChangeIndex={handleChangeIndex}
          onTransitionEnd={handleTransitionEnd}
          >
          {children}
        </Swipeable>
      </div>
    );
  }

  _pushCallbackStack (swipeToErrorPageFunc) {
    this.setState({swipeToErrorPageFuncs: [...this.state.swipeToErrorPageFuncs, swipeToErrorPageFunc]});
  }

  _clearCallbackStack() {
    this.setState({swipeToErrorPageFuncs: []});
  }
}

/*SwipeableViews.propTypes = {
  index: React.PropTypes.number.isRequired,
  onChengeIndex: React.PropTypes.func.isRequired,
  onPageValidate: React.PropTypes.func,
  children: React.PropTypes.node.isRequired,
};*/

export default SwipeableViews;
